<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>编辑内容</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			body {
				background-repeat: no-repeat;
				background-size: cover;
				background-image: url(./img/1.jpg);
			}

			.box {
				width: 500px;
				height: 500px;
				background-color: #fff;
			}

			.box input {
				outline: none;
				border: 1px solid #ccc;
			}

			.box .down {
				width: 100px;
				border: 1px solid #000;
				text-align: center;
				background-color: #0f0;
			}

			.box .down h2 {
				font-size: 20px;
				font-weight: normal;
			}

			.box .down ul {
				display: none;
			}

			.box .down ul li {
				border-top: 1px solid #000;
			}

			img {
				width: 100px;
			}

			.box>ul li {
				width: 50px;
				height: 50px;
				border: 1px solid #000;
			}

			.box>ul li.on {
				background-color: #f00;
			}

			.color {
				color: blue;
				font-size: 28px;
			}

			.box ul li.on {
				text-align: center;
				line-height: 50px;
				background-color: #f00;
				border-color: blue;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul>
				<li class="color on">1</li>
				<li class="color">2</li>
				<li class="color">3</li>
				<li class="color">4</li>
				<li class="color">5</li>
				<li class="color">6</li>
			</ul>
		</div>


		<script type="text/javascript">
			let aLi = document.querySelectorAll('.box ul li')
			/**
			 * 排他操作
			 *     7   6   2
			 * 
			 */
			let num = 0
			for (let i = 0; i < aLi.length; i++) {
				aLi[i].onclick = function(){
					// console.log(6666,i);
					// aLi[num].classList.remove('on')
					// this.classList.add('on')
					// num = i
					console.log( aLi[i].classList.contains('on') );
				}
			}
		</script>


		<!-- 
		
		 1.onmouseenter与onmouseleave
		  再其子元素身上 不会 触发 该事件
		 2.onmouseover与onmouseout
		 在子元素身上也会 再次触发 事件
		 
		1循环获取节点
		
		2，闭包  - 闭包指的是有权访问父函数作用域的变量的函数，即使在父函数关闭之后。
			变量的生命周期
			全局变量活得和您的应用程序（窗口、网页）一样久。
			局部变量活得不长。它们在函数调用时创建，在函数完成后被删除。
			一个计数器的困境
			--断点调试
		3.排他操作
		 如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法：
			1. 所有元素全部清除样式（干掉其他人）
			2. 给当前元素设置样式 （留下我自己）
			3. 注意顺序不能颠倒，首先干掉其他人，再设置自己
			
		4.classList  - 通过类名改样式
		 dom.classList.add('on')添加类名
		 dom.classList.remove('on')移除类名
		 dom.classList.toggle('on')切换类名
		 dom.classList.replace('old','new')替换类名
		 dom.classList.contains('on')判断是否包含类名 on
		 -->
	</body>
</html>